import React, { useReducer } from 'react';
import ReactDOM from 'react-dom';

let reducer = (state, action) => {
  // 这个函数的执行返回结果 会顶替上一次的state
  // 大白话就是 这个函数会返一个新的state
  console.log(state, action)
  // 这个函数中 我们一个会根据不同的type来对不同的属性做修改
  switch (action.type) {
    case 'add':
      if (action.nnn > 2) {
        action.nnn = 2
      }
      return {
        ...state,
        age: state.age + action.nnn
      }
    case 'CN':
      return {
        ...state,
        name: action.mmm
      }
    default:
      return {
        ...state
      }
  }
}
function App() {

  let [state, dispatch] = useReducer(reducer, {
    name: "珠峰",
    age: 13
  })
  console.log(state, dispatch)
  return <>
    <h1>姓名：{state.name}----年龄式{state.age}</h1>

    <button onClick={() => { dispatch({ type: "add", nnn: 3 }) }}>+</button>
    <button onClick={() => { dispatch({ type: 'CN', mmm: "珠峰666" }) }}>name</button>
  </>
}

ReactDOM.render(<App />, document.getElementById('root'))